<template>
  <div>
    <h1 ref="h">ref获取组件实例</h1>
    <h1 ref="h">ref获取组件实例</h1>
    <h1 ref="h">ref获取组件实例</h1>
    <hm-counter ref="hc"></hm-counter>
    <hm-counter ref="hc"></hm-counter>
    <hm-counter ref="hc"></hm-counter>
    <button @click="handleClick">获取组件实例</button>
  </div>
</template>

<script>
import HmCounter from "./components/hm-counter.vue";
/**
 * 1. 先给目标组件设置ref属性 ref="zzz"
 * 2. 在恰当的时机 通过this.$refs.zzz 获取组件实例
 */
export default {
  components: {
    HmCounter,
  },
  methods: {
    handleClick() {
      console.log(this.$refs.h);
      this.$refs.h.style.color = "red";
      console.log(this.$refs.hc);
      const hcComp = this.$refs.hc;
      console.log("count", hcComp.count);
      console.log("doubleCount", hcComp.doubleCount);
      hcComp.sayHi();

      hcComp.count = 100;
    },
  },
};
</script>

<style>
</style>
